import React, { memo } from 'react';

import { formatImageSize } from "@/utils/format-utils";

import { RankCoverWrapper } from "./style";

const RankingCover = memo((props) => {
  const { item } = props;

  return (
    <RankCoverWrapper>
      <a href="/#">
        <img src={formatImageSize(item.picUrl, 120)} alt="" />
      </a>
      
      <div className="info">
        <h2 className="title">{item.name}</h2>
        <div className="nickname sprite_icon2">
          <i className="sprite_icon2 left"></i>
          {item.dj.nickname}
        </div>

        <div className="count">
          <span className="phase">共{item.programCount}期</span>
          <span className="subscribe">订阅{item.subCount}次</span>
        </div>
      </div>
    </RankCoverWrapper>
  )
})

export default RankingCover